<template>
  <div>
    <!-- 首页 -->
    <van-nav-bar title="首页" />
    <!-- 这是切换区域部分 -->
    <van-tabs v-model:="active">
      <van-tab title="主页">11</van-tab>
      <van-tab title="空数据">22</van-tab>
      <van-tab title="衣服">33</van-tab>
      <van-tab title="美食">44</van-tab>
    </van-tabs>
    <!-- 这是搜索部分 -->
    <van-search v-model="value" shape="round" background="#4fc08d" placeholder="请输入搜索关键词" />
    <!-- 这是轮播部分 -->
    <van-swipe :autoplay="3000" lazy-render>
      <van-swipe-item v-for="image in images" :key="image">
        <img :src="image" style="width: 100%;height: 220px;" />
      </van-swipe-item>
    </van-swipe>
    <!-- 这是导航部分 -->
    <van-grid>
      <van-grid-item icon="photo-o" text="天马" />
      <van-grid-item icon="photo-o" text="星空" />
      <van-grid-item icon="photo-o" text="手机" />
      <van-grid-item icon="photo-o" text="天涯" />
      <van-grid-item icon="photo-o" text="天马" />
      <van-grid-item icon="photo-o" text="星空" />
      <van-grid-item icon="photo-o" text="手机" />
      <van-grid-item icon="photo-o" text="天涯" />
    </van-grid>
    <h3>热门</h3>
    <van-row>
      <van-col span="6">
        <van-card
          num="2"
          price="2.00"
          desc="描述信息"
          title="商品标题"
          thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
        />
      </van-col>
      <van-col span="6">
        <van-card
          num="2"
          price="2.00"
          desc="描述信息"
          title="商品标题"
          thumb="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
        />
      </van-col>
      <van-col span="6">
        <van-card
          num="2"
          price="2.00"
          desc="描述信息"
          title="商品标题"
          thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
        />
      </van-col>
      <van-col span="6">
        <van-card
          num="2"
          price="2.00"
          desc="描述信息"
          title="商品标题"
          thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
        />
      </van-col>
    </van-row>
      <van-row>
    <van-col span="6">
      <van-card
        num="2"
        price="2.00"
        desc="描述信息"
        title="商品标题"
        thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
      />
    </van-col>
    <van-col span="6">
      <van-card
        num="2"
        price="2.00"
        desc="描述信息"
        title="商品标题"
        thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
      />
    </van-col>
    <van-col span="6">
      <van-card
        num="2"
        price="2.00"
        desc="描述信息"
        title="商品标题"
        thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
      />
    </van-col>
    <van-col span="6">
      <van-card
        num="2"
        price="2.00"
        desc="描述信息"
        title="商品标题"
        thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
      />
    </van-col>
  </van-row>
    <van-row>
    <van-col span="6">
      <van-card
        num="2"
        price="2.00"
        desc="描述信息"
        title="商品标题"
        thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
      />
    </van-col>
    <van-col span="6">
      <van-card
        num="2"
        price="2.00"
        desc="描述信息"
        title="商品标题"
        thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
      />
    </van-col>
    <van-col span="6">
      <van-card
        num="2"
        price="2.00"
        desc="描述信息"
        title="商品标题"
        thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
      />
    </van-col>
    <van-col span="6">
      <van-card
        num="2"
        price="2.00"
        desc="描述信息"
        title="商品标题"
        thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
      />
    </van-col>
  </van-row>
  </div>
</template>

<script setup>
import { ref } from "vue";
const images = [
  "https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg",
  "https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg",
  "https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg",
  "https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg"
];

</script>

<style lang="scss" scoped>

</style>
